<template>
  <div id="indexMain">
    <header style="-webkit-app-region: drag">
      <span class="left">
        <img src="./img/logo.png" alt="">
        OceanxTools
        <span v-if="$route.meta.name"> <i class="el-icon-caret-right"></i> {{$route.meta.name}}</span>
      </span>
      <span class="right">
        <i class="el-icon-house" @click="$router.push('/')" v-if="$route.path != '/'" title="回到桌面"></i>
        <i class="iconfont icon-minus" @click="setWindowSize('on-min')"></i>
        <i class="iconfont icon-window-maximize" v-if="windowSize=='unfull'" @click="setWindowSize('on-fullScreen')"></i>
        <i class="iconfont icon-windows" v-else @click="setWindowSize('on-fullScreen')" ></i>
        <i class="iconfont icon-Close" @click="setWindowSize('on-close')"></i>
      </span>
    </header>
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <span>
        <span v-if="online"><i class="iconfont icon-xinhao5" title="网络正常"></i> 网络正常</span>
        <span v-else><i class="iconfont icon-tubiaozhizuomoban" title="离线"> 离线</i></span>
      </span>
      <span>
        <button ><i class="el-icon-files"></i> 数据集</button>
        <button ><i class="el-icon-collection-tag"></i> V.0.0.5 Beta</button>
        <button  title="打开控制台" @click="openDevTool()" v-if="production"><i class="el-icon-bangzhu" ></i></button>
      </span>
    </footer>
  </div>  
</template>
<script>
module.exports = {
  components: {
    'v-desktop': httpVueLoader('./desktop.vue'),
    'v-serialport': httpVueLoader('./serialport/index.vue')
  },
  data(){
    return {
      online: true,
      windowSize: "unfull",
      production: process.env.NODE_ENV == 'production '
    }
  },
  async mounted () {
    this.ipc();
    window.addEventListener('online', () => this.online = true)
    window.addEventListener('offline', () => this.online = false)
  },
  methods: {
    openDevTool(){
      this.$ipc.send('on-openDevTools')
    },
    setWindowSize(size){
      this.$ipc.send(size)
    },
    ipc(){
      this.$ipc.on('windowSize', (e, msg) => {
        this.windowSize = msg
      })
    }
  },
  watch: {
    "$route.meta.name": {
      handler(val){
        if(val){
          document.getElementsByTagName('title')[0].innerText =  val + ' OceanxTools'
        }else{
          document.getElementsByTagName('title')[0].innerText = 'OceanxTools'
        }
      },
      immediate: true
    }
  }
}
</script>
<style lang="less">
#indexMain{
  height: 100%;
  width: 100%;
  header{
    height: 25px;
    user-select: none;
    background: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.3));
    box-shadow: 0 1px 0px rgba(255,255,255,.2) inset;
    border-bottom: 1px solid rgba(0,0,0,1);
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
    color: rgb(196, 196, 196);
    img{
      height: 16px;
      margin-right: 5px;
    }
    .left{
      display: flex;
      align-items: center;
      letter-spacing: 0;
    }
    .right{
       -webkit-app-region: no-drag;
       user-select: none;
       height: 30px;
       line-height: 30px;
      i{
        cursor: pointer;
        color: rgba(255,255,255,.8);
        padding-left: 5px;
        &:hover{
          color: #fff;
        }
        &.icon-xinhao5,&.icon-tubiaozhizuomoban, &.icon-yingyongzhongxin{
          font-size: 13px;
          &:hover{
            color: unset
          }
        }
      }
    }
  }
  main{
    height: calc(~"100% - 52px");
    width: 100%;
    color: #fff;
  }
  footer{
    user-select: none;
    width: calc(~"100% - 20px");
    padding:0 10px;
    height: 25px;
    border-top: 1px solid rgba(0,0,0,.5);
    box-shadow: 0 1px 0px rgba(255,255,255,.9) inset;
    background: linear-gradient(to bottom, rgba(255,255,255,.8), rgba(255,255,255,.7));
    line-height: 24px;
    font-size: 12px;
    color: rgba(0,0,0,.58);
    display: flex;
    justify-content: space-between;
    button{
      padding: 0 5px;
      height: 20px;
    }
    span{
      display: flex;
      align-items:center;
    }
    button+button{
      margin-left: 5px;
    }
    .icon-xinhao5{
      color: #009c3f;
      font-size: 12px;
    }
    .icon-tubiaozhizuomoban{
      color: #f00;
      font-size: 12px;
    }
  }
}
</style>